
<template>
    <div class="echarts-box">
      <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
    </div>
  </template>
  
<script>
import * as echarts from "echarts";
import {onMounted, onUnmounted , watch, ref , reactive } from "vue";
export default {
  props: ["width", "height",'funnel'],
  setup( proxy ) {
    let funnel = ref(proxy.funnel);
    let myEcharts = echarts;
    let chart = null;
    let options = reactive({
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                width: 1,
                type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                  fontSize: 20
                }
            },
            data: funnel.value
          }
        ]
    })

    //监听
    watch(() => [proxy.funnel], ([newInfo], [oldInfo]) => {
      
      chart.setOption(
        {
          series: [{
            data:newInfo,
            ...options.series[0]
          }]
        });

    })

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      myEcharts.dispose;
    });

    function initChart() {
      chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
      chart.setOption(options);
      window.onresize = function () {
        chart.resize();
      };
    }
    return {
      initChart
    };
  }
};
</script>